<!--
 * @description: 
 * @Date: 2022-11-24 19:18:43
 * @example: 
 * @params: 
-->
<template>
  <div class="Container">
      <div class="UserInfo">
          <div class="u_left">
             <div class="u_avatar">
              <Avatar icon="ios-person" :size="80" :src="$store.state.Userinfo.avatar" />
             </div>
             <div class="u_message"> 
                <p class="u_hello">早安,{{$store.state.Userinfo.nickname}},今天又是充满活力的一天!</p>
                <p class="u_weather"><iframe width="300" height="25" frameborder="0" scrolling="no" hspace="0" src="https://i.tianqi.com/?c=code&a=getcode&id=10&py=shenzhen&icon=1"></iframe></p>
             </div>
          </div>
          <div class="u_right"></div>
      </div>
  </div>
</template>
<script>
import ImageUplodVue from "@/components/ImageUplod.vue";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      Weather:{},
    }
  },
  mounted(){

  },
  computed:{
    ...mapGetters([
      'Username',
      'Role'
    ])
  },
  created(){
  },
  methods:{
  },
  components:{
    ImageUplodVue
  }
}
</script>
<style lang="less" scoped>
.Container{
  position: absolute;
  width: 85%;
  height: 100%;
  .UserInfo{
    display: flex;
    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 10%);
    justify-content: space-between;
    padding: 20px;
    background-color: #f5f7f9;
    .u_left{
      display: flex;
      align-items: center;


      .u_message{
        margin-left: 20px;
      .u_hello{
        font-size: 20px;
        font-weight: bold;
        }
       .u_weather{
        margin-left: -30px;
       }
      }
    }



  }
}
</style>

